// @ts-nocheck
import * as React from "react";

import type { SlateLeafProps, TSuggestionText } from "platejs";

import { BaseSuggestionPlugin } from "@platejs/suggestion";
import { SlateLeaf } from "platejs";

import { cn } from "@/utils/cn";

export function SuggestionLeafStatic(props: SlateLeafProps<TSuggestionText>) {
  const { editor, leaf } = props;

  const dataList = editor.getApi(BaseSuggestionPlugin).suggestion.dataList(leaf);
  const hasRemove = dataList.some((data) => data.type === "remove");
  const diffOperation = { type: hasRemove ? "delete" : "insert" } as const;

  const Component = ({ delete: "del", insert: "ins", update: "span" } as const)[diffOperation.type];

  return (
    <SlateLeaf
      {...props}
      as={Component}
      className={cn(
        "border-b-brand/[.24] bg-brand/[.08] text-brand/80 border-b-2 no-underline transition-colors duration-200",
        hasRemove && "border-b-gray-300 bg-gray-300/25 text-gray-400 line-through",
      )}
    >
      {props.children}
    </SlateLeaf>
  );
}
